<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec"
           uri="http://www.springframework.org/security/tags"%>

<%@include file="/common/head.jsp"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.min.css?v=4.1.0" rel="stylesheet">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body class="gray-bg">
<div class="">
    <div class="">
        <div class="middle-box text-center animated fadeInDown">

    <form id="form" method="post" action="${ctx }/admin/user/saveIdPicture" enctype="multipart/form-data">

        <br>
        <h2 class="font-bold">身份证上传</h2>
        <br><br><br>
        <div style="font-size: 18px">
        请先选择身份证照片

        <div class="img_show img_show1">
            <img src="${user.idPicture }" width="300" height="400" alt="">
            <input name="file" type="file" id="file" class="upfile" accept="middle">
        </div>
        <br />
        <input type="submit" id="send" class="btn btn-sm  btn-info" value="上传身份证"/>
        </div>
        <%--<a href="/admin/user/downloadPicture" >下载</a>--%>
    <script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</form>
        </div>
    </div>
</div>
</body>

<body class="gray-bg">

<%@include file="/common/foot.jsp"%>

<script>
    $(document).ready(function() {
        $('.img_show').each(function(){
            var $this = $(this);
            var btn = $this.find('.upfile');
            var img = $this.find('img');
            btn.on('change', function(){
                var file = $(this)[0].files[0];
                var imgSrc = $(this)[0].value;
                var url = URL.createObjectURL(file);
                if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)){
                    alert("请上传jpg或png格式的图片！");
                    return false;
                } else {
                    img.attr('src',url);
                    img.css({'opacity':'1'});
                }
            });
        });
    });
    var send = document.getElementById("send");
    send.onclick=function () {
        var file = document.getElementById("file").value;
        if(file.length<1){
            alert('请上传身份证图片');
            return false;
        }
    }

</script>
</body>
</html>
